<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button id="dialog">dialog</button>
  <img src="" alt="" id="img" style="width: 100%">
  <button id="save">保存文件</button>
  <button id="button">对话框</button>
  <script>
    const {dialog} = require('@electron/remote');
    const fs = require('fs')
    console.log('dialog', dialog)
    let oBtn = document.querySelector('#dialog');
    let oImg = document.querySelector('#img');
    let saveBtn = document.querySelector('#save');
    let button = document.querySelector('#button');

    oBtn.onclick = function () {
      console.log(3434)
      dialog.showOpenDialog({
        title: '请选择',
        filters: [{name: 'img', extensions: ['jpg', 'png', 'gif']}], // 过滤
        buttonLabel: '上传', // 按钮
      }).then(res => {
        console.log(res)
        oImg.setAttribute('src', res.filePaths[0])
      }).catch(error => {
        console.log('error', error)
      })
    }

    saveBtn.onclick = function () {
      dialog.showSaveDialog({
        title: '保存文件'
      }).then(res => {
        console.log('保存成功', res)
        fs.writeFileSync(res.filePath, 'jj')
      }).catch(error => {
        console.log('保存失败', error)
      })
    }

    button.onclick = function () {
      dialog.showMessageBox({
        type: 'warning',
        title: '警告⚠️',
        message: '操你妈',
        buttons: ['取消', '好'] // 可选
      }).then(res => {
        console.log(res)
        if(res.response == 0) {
          console.log('1')
        } else {
          console.log(2)
        }
      })
    }
  </script>
</body>
</html>